<template>
  <section class="aside">
    <!-- :default-active="$route.path" 页面刷新的时候防止丢失选中状态 -->
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      :collapse="isCollapse"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <!-- 没有子菜单 -->
      <el-menu-item :index="item.path" v-for="item of noChildren" :key="item.path" @click="clickMenu(item)">
        <i :class="'el-icon-' + item.icon"></i>
        <span slot="title">{{ item.label }}</span>
      </el-menu-item>
      <!-- 有子菜单 -->
      <el-submenu index="item.label" v-for="(item, i) of hasChildren" :key="i">
        <template slot="title">
          <i :class="'el-icon-' + item.icon"></i>
          <span>{{ item.label }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item v-for="(itemSon, indexSon) of item.children" :key="indexSon" :index="itemSon.path" @click="clickMenu(itemSon)">
            <i :class="'el-icon-' + itemSon.icon"></i>
            <span>{{ itemSon.label }}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </section>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'homeAside',
  data() {
    return {
      // asideMenu: [
      //   {
      //     path: '/',
      //     name: 'home',
      //     label: '首页',
      //     icon: 's-home'
      //   },
      //   {
      //     path: '/video',
      //     name: 'video',
      //     label: '视频管理',
      //     icon: 'video-play'
      //   },
      //   {
      //     path: '/user',
      //     name: 'user',
      //     label: '用户管理',
      //     icon: 'user'
      //   },
      //   {
      //     label: '其他',
      //     icon: 'setting',
      //     children: [
      //       {
      //         path: '/page1',
      //         name: 'page1',
      //         label: '页面1',
      //         icon: 'user'
      //       },
      //       {
      //         path: '/page2',
      //         name: 'page2',
      //         label: '页面2',
      //         icon: 'user'
      //       }
      //     ]
      //   }
      // ]
    }
  },
  computed: {
    noChildren() {
      // 判断菜单中是否没有有子菜单
      return this.menu.filter(item => !item.children)
    },
    hasChildren() {
      // 判断菜单中是否有子菜单
      return this.menu.filter(item => item.children)
    },
    ...mapState({
      // 取出state菜单的状态值
      isCollapse: state => state.tab.isCollapse,
      menu: state => state.tab.menu
    })
  },
  methods: {
    clickMenu(val) {
      this.$router.push({ name: val.name })
      this.$store.commit('selectMenu', val)
    }
  }
}
</script>

<style lang="stylus" scoped>
.el-menu
  height: calc(100vh)
// 左边导航菜单折叠动画bug调整
.aside >>>.el-menu-vertical-demo:not(.el-menu--collapse)
  width: 200px
  min-height: 400px
.aside
  .el-menu-vertical-demo
    border none
    h3
      font-size: .9375rem
      color: #ffffff
      line-height: 48px
      text-align centerpx
</style>
